<template>
    <div class="login">
        <el-form ref="form" :model="form" :rules="rules" class="container">
            <div class="avatar">
                <img src="../assets/Jonelle.png" alt="">
            </div>
            <el-form-item prop="username">
                <el-input v-model="form.username" prefix-icon="myicon myicon-user" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" type="password" prefix-icon="myicon myicon-key" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="login-btn" @click="loginSubmit('form')">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { checkUser } from '@/api'
export default {
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        loginSubmit(formName) {
            console.log(formName)
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log('校验通过')
                    // console.log(this.form)
                    checkUser(this.form).then(res => {
                        console.log(res)
                        //验证登录是否成功？
                        if (res.meta.status != 200) {
                            this.$message({
                                message: res.meta.msg,
                                type: 'error'
                            });
                        } else {
                            // 如果成功要跳转至首页, 将token保存到localStorage, 将username保存到vuex的state中
                            localStorage.setItem('mytoken', res.data.token)
                            //登录成功，跳转到首页
                            this.$router.push({ name: 'Home' })
                        }
                    })
                } else {
                    console.log('校验失败')
                }
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.login {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #2f4050;

    .container {
        position: absolute;
        left: 0;
        right: 0;
        width: 400px;
        padding: 0px 40px 15px 40px;
        margin: 200px auto;
        background: white;
        .avatar {
            position: relative;
            left: 50%;
            width: 120px;
            height: 120px;
            margin-left: -60px;
            margin-top: -60px;
            margin-bottom: 30px;
            box-sizing: border-box;
            border-radius: 50%;
            border: 10px solid #fff;
            box-shadow: 0 1px 5px #ccc;
            overflow: hidden;
            >img {
                width: 100%;
                height: 100%;
            }
        }
        .login-btn {
            width: 100%;
        }
    }
}
</style>
